<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素</title>
	</head>
	<body>
		<div class="d1">hello1</div>
		<div class="d2">hello2</div>		
		<div class="d3">hello3</div>
		<div class="d4">hello4</div>
		<div class="d5">hello5</div>
		<script type="text/javascript">
			//插入元素
			//创建元素
			var h4 = document.createElement('h4');
			//设置元素
			h4.innerHTML = '明早吃啥？';
			//找到被插入的父元素
			var d1 = document.querySelector('.d1');
			//追加子元素
			d1.appendChild(h4);


			//从前面插入元素
			var h3 =  document.createElement('h3');
			h3.innerHTML = '一起聚会！';
		//	var body = document.querySelector('body');
			var d3 = document.querySelector('.d3');
			d3.parentElement.insertBefore(h3,d3);

			
			//删除元素
		/* 	var body = document.querySelector('body');
			var d5 = document.querySelector('.d5');
			body.removeChild(d5); */

			//克隆元素
			var h1 = h3.cloneNode(true);
			var d5 = document.querySelector('.d5');
			d5.appendChild(h1);



		</script>
	</body>
</html>